<template>
	<view class="u-wrap">
		<view class="u-search-box">
			<view class="u-search-inner">
				<u-icon
					name="search"
					color="#909399"
					:size="28"
				/>
				<text class="u-search-text">搜索</text>
			</view>
		</view>
		<view class="u-menu-wrap">
			<scroll-view
				scroll-y
				scroll-with-animation
				class="u-tab-view menu-scroll-view"
				:scroll-top="scrollTop"
				:scroll-into-view="itemId"
			>
				<view
					v-for="(item,index) in tabbar"
					:key="index"
					class="u-tab-item"
					:class="[current == index ? 'u-tab-item-active' : '']"
					@tap.stop="swichMenu(index)"
				>
					<text class="u-line-1">{{item.name}}</text>
				</view>
			</scroll-view>
			<scroll-view
				:scroll-top="scrollRightTop"
				scroll-y
				scroll-with-animation
				class="right-box"
				@scroll="rightScroll"
			>
				<view class="Community-card">
					<view class="title">
						<image
							:src="headerUrl"
							class="header"
						/>
						<text>{{headerName}}</text>
					</view>

					<view class="commits">
						<text>{{publishedWord}}</text>
					</view>
					<view class="imgs">
						<image
							v-for="(item,index) in urls"
							:key="index"
							:src="headerUrl"
							:index="index"
						/>
					</view>
					<view class="comments">
						<view class="author">
							<text class="name">{{comments[0].name+":"}}</text>
							<text class="comment">{{comments[0].value}}</text>
						</view>
						<view
							class="author"
							v-if="comments.length>=1"
						>
							<text class="name">{{comments[1].name+":"}}</text>
							<text class="comment">{{comments[1].value}}</text>
						</view>
						<view
							class="author"
							v-if="comments.length>=2"
							@click="linkto('../../packages/Formpages/FourDetail/index')"
						>
							<text class="comment-len">共{{comments.length}}条评论></text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view
			class="u-publish"
			@click="linkto('../../packages/Formpages/FormPublish/index')"
		>
			<u-icon
				name="plus"
				size="40"
				color="white"
				bold="true"
			/>
		</view>
	</view>
</template>
<script>
import classifyData from '@/common/classify.data.js'
import communityCard from './componets/communityCard.vue'
export default {
  components: {
    communityCard
  },
  data() {
    return {
      scrollTop: 0, // tab标题的滚动条位置
      oldScrollTop: 0,
      current: 0, // 预设当前项的值
      menuHeight: 0, // 左边菜单的高度
      menuItemHeight: 0, // 左边菜单item的高度
      itemId: '', // 栏目右边scroll-view用于滚动的id
      tabbar: classifyData,
      menuItemPos: [],
      arr: [],
      scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
      timer: null, // 定时器
      // 头像的url
      headerUrl: 'https://tse1-mm.cn.bing.net/th/id/R-C.7537ef0cf2acd731a1ff3835e0b61f81?rik=4QlP04iVCFGjjQ&riu=http%3a%2f%2ffile.qqtouxiang.com%2fnansheng%2f2020-06-30%2f22cbcb5f0d35887ff71e444bad3b724c.jpg&ehk=H0oVJvgLHWf7MBxrLBYEB1uABTuT5%2fctRtwDqy6%2b8uQ%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1',
      headerName: 'asd',
      // 我的发布词
      publishedWord: '阿达萨达撒大大大撒大苏打',
      // 图片集合urls
      urls: [
        'https://tse1-mm.cn.bing.net/th/id/R-C.f2d80e4725e48ce3641a024d230b8ebd?rik=17esTVlTigAHsw&riu=http%3a%2f%2ffile.qqtouxiang.com%2fgaoxiao%2f2020-01-22%2f26b385d6c7879c62dfa5a746a39e8875.jpeg&ehk=wsEq%2fgGWcOH55wVMQinSNm5VvSqj1%2bto5GeJxDWBFYk%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1',
        'https://tse4-mm.cn.bing.net/th/id/OIP-C.WsVs_1wXmbVZ1543fXUHbwAAAA?pid=ImgDet&rs=1',
        'https://tse1-mm.cn.bing.net/th/id/R-C.4459915d83672508b373dc0ad65ffe22?rik=%2fh0%2bPFJE0k2gHw&riu=http%3a%2f%2ffile.qqtouxiang.com%2fnvsheng%2f2020-02-13%2f5885422d764fcc06d9d6157d08dfc88e.jpeg&ehk=%2b%2bodGGVWI8nntD9bHnKc26%2bCgr5GC8UD%2fkJ5TNXhwfo%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1'
      ],
      // 评论
      comments: [
        { name: '评论者一', value: '阿萨大大' },
        { name: '评论者二', value: '阿萨大大' },
        { name: '评论者三', value: '阿萨大大' },
        { name: '评论者四', value: '阿萨大大' }
      ]
    }
  },
  onLoad() {

  },
  onReady() {
    this.getMenuItemTop()
  },
  created() {
    // this.linkto()
  },
  methods: {
    //
    linkto(item) {
      uni.navigateTo({
        url: item
      })
    },
    // 点击左边的栏目切换
    async swichMenu(index) {
      if (this.arr.length == 0) {
        await this.getMenuItemTop()
      }
      if (index == this.current) return
      this.scrollRightTop = this.oldScrollTop
      this.$nextTick(function() {
        this.scrollRightTop = this.arr[ index ]
        this.current = index
        this.leftMenuStatus(index)
      })
    },
    // 获取一个目标元素的高度
    getElRect(elClass, dataVal) {
      new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this)

        query.select('.' + elClass).fields({
          size: true
        }, res => {
          // 如果节点尚未生成，res值为null，循环调用执行
          if (!res) {
            setTimeout(() => {
              this.getElRect(elClass)
            }, 10)
            return
          }
          this[ dataVal ] = res.height
          resolve()
        }).exec()
      })
    },
    // 观测元素相交状态
    async observer() {
      this.tabbar.map((val, index) => {
        const observer = uni.createIntersectionObserver(this)
        // 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
        // 如果跟.right-box底部相交，就动态设置左边栏目的活动状态

        observer.relativeTo('.right-box', {
          top: 0
        }).observe('#item' + index, res => {
          if (res.intersectionRatio > 0) {
            const id = res.id.substring(4)

            this.leftMenuStatus(id)
          }
        })
      })
    },
    // 设置左边菜单的滚动状态
    async leftMenuStatus(index) {
      this.current = index
      // 如果为0，意味着尚未初始化
      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
        await this.getElRect('menu-scroll-view', 'menuHeight')
        await this.getElRect('u-tab-item', 'menuItemHeight')
      }
      // 将菜单活动item垂直居中
      this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2
    },
    // 获取右边菜单每个item到顶部的距离
    getMenuItemTop() {
      new Promise(resolve => {
        const selectorQuery = uni.createSelectorQuery()

        selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
          // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
          if (!rects.length) {
            setTimeout(() => {
              this.getMenuItemTop()
            }, 10)
            return
          }
          rects.forEach((rect) => {
            // 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
            this.arr.push(rect.top - rects[ 0 ].top)
            resolve()
          })
        }).exec()
      })
    },
    // 右边菜单滚动
    async rightScroll(e) {
      this.oldScrollTop = e.detail.scrollTop
      if (this.arr.length == 0) {
        await this.getMenuItemTop()
      }
      if (this.timer) return
      if (!this.menuHeight) {
        await this.getElRect('menu-scroll-view', 'menuHeight')
      }
      setTimeout(() => { // 节流
        this.timer = null
        // scrollHeight为右边菜单垂直中点位置
        const scrollHeight = e.detail.scrollTop + this.menuHeight / 2

        for (let i = 0; i < this.arr.length; i++) {
          const height1 = this.arr[ i ]

          const height2 = this.arr[ i + 1 ]
          // 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可

          if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
            this.leftMenuStatus(i)
            return
          }
        }
      }, 10)
    }
  }
}
</script>

<style lang="scss" scoped>
	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
	}

	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}

	.u-tab-view {
		width: 200rpx;
		height: 100%;
	}

	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}

	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}

	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid $u-primary;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}

	.u-tab-view {
		height: 100%;
	}

	.right-box {
		background-color: rgb(250, 250, 250);
	}

	.page-view {
		padding: 16rpx;
	}

	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	.class-item:last-child {
		min-height: 100vh;
	}

	.item-title {
		font-size: 26rpx;
		color:$u-main-color ;
		font-weight: bold;
	}

	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color: $u-main-color;
	}

	.item-container {
		display: flex;
		flex-wrap: wrap;
	}

	.thumb-box {
		width: 33.333333%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}

	.item-menu-image {
		width: 120rpx;
		height: 120rpx;
	}
	.Community-card{
		padding: 20rpx;
		margin-left:30rpx;
		margin-right: 30rpx;
		background-color:#fff;
		border-radius: 40rpx;
		align-items: center;
		box-shadow:0 8px 10px #eaeaeaff ;
		.title{
			display: flex;
		.header{
			height: 72rpx;
			width: 72rpx;
			border-radius:100% ;
			}
			text{
				line-height: 72rpx;
				margin-left: 50rpx;
			}
		}
		.commits{
			margin-top: 10rpx;
		}

		.imgs{
			display: flex;
			image{
				width: 150rpx;
				height: 150rpx;
			}
		}
		.comments{
			width: 100%;
			border-radius: 15rpx;
			padding: 18rpx;
			margin-top: 20rpx;
			background-color: #F4F6F3FF;
			margin-left: 50%;
			transform: translate(-50%);
			.author{
				margin-top: -10rpx;
			}
			.name{
				color:#3A62E9FF;
				font-size: 24rpx;
			}
			.comment{
				color: #181818FF;
				font-size: 24rpx;
				margin-left: 10rpx;
			}
			.comment-len{
				color: #ACACACFF;
				font-size: 24rpx;
			}
		}
	}
	.u-publish{
		position: fixed;
		border-radius: 100%;
		bottom:50rpx;
		right: 50rpx;
		width: 100rpx;
		height: 100rpx;
		padding: 10rpx;
		background-color: #007AFF;
		text-align: center;
		align-items: center;
		justify-content: center;
		color: white;
		box-shadow: 0 8rpx 16rpx #3c67f3ff;
		.u-icon{
			color: white;
			margin-top: 20rpx;
		}
	}
</style>

